<template>
  <div class="chatRight">
    <div class="user">
      <div class="avatar">
        <el-avatar size="42" :src="chatMap?.avatar" />
      </div>
      <div class="name">{{ userFrom.name || '客户名称' }}</div>
    </div>
    <div class="user-info">
      <div class="item">
        <div class="title">客户名称:</div>
        <div class="currently" v-if="editFrom">{{ userFrom.name }}</div>
        <el-input
          class="item-input"
          v-model="userFrom.name"
          placeholder="请输入客户名称"
          v-else
        ></el-input>
      </div>
      <div class="item">
        <div class="title">客户手机号:</div>
        <div class="currently" v-if="editFrom">{{ userFrom.mobile }}</div>
        <el-input
          class="item-input"
          v-model="userFrom.mobile"
          placeholder="请输入客户手机号"
          v-else
        ></el-input>
      </div>
      <div class="item">
        <div class="title">客户需求:</div>
        <div class="currently" v-if="editFrom">{{ userFrom.demand }}</div>
        <el-input
          class="item-input"
          v-model="userFrom.demand"
          placeholder="请输入客户需求"
          v-else
        ></el-input>
      </div>
      <div class="item">
        <div class="title">客户地址:</div>
        <div class="currently" v-if="editFrom">{{ userFrom.address }}</div>
        <el-input
          class="item-input"
          v-model="userFrom.address"
          placeholder="请输入客户地址"
          v-else
        ></el-input>
      </div>
      <div class="item">
        <div class="title">意向等级:</div>
        <div class="currently" v-if="editFrom">{{ setLevel(userFrom.level) }}</div>
        <el-select
          style="width: calc(100% - 72px)"
          v-model="userFrom.level"
          v-else
          placeholder="请选择意向等级"
        >
          <el-option
            v-for="item in levelOption"
            :key="item.id"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="items">
        <div class="title">备注:</div>
        <div class="currently" v-if="editFrom">{{ userFrom.remark }}</div>
        <el-input
          type="textarea"
          class="item-input"
          v-model="userFrom.remark"
          placeholder="请输入备注"
          v-else
        ></el-input>
      </div>
    </div>
    <div style="text-align: center; margin-top: 10px">
      <el-button
        style="width: 100%"
        type="primary"
        v-if="editFrom"
        :disabled="disableEdit"
        @click="editFrom = false"
        >编辑</el-button
      >
      <div style="display: flex; flex-direction: column" v-else>
        <el-button style="width: 100%" type="primary" @click="updateFrom">更新</el-button>
        <el-button style="width: 100%; margin: 10px 0 0 0" @click="cancal">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { updateCustomer } from '@/api/service/workbench/index'
const props = defineProps({
  chatMap: Object
})
const editFrom = ref(true)
const userFrom = ref({
  name: '',
  mobile: '',
  remark: '',
  demand: '',
  address: '',
  level: ''
})
const levelOption = ref([
  { name: '无意向', value: 0, id: 0 },
  { name: '有意向', value: 1, id: 1 },
  { name: '高意向', value: 2, id: 2 },
  { name: '重要客户', value: 9, id: 9 }
])
const emit = defineEmits(['reshCustomers'])
const setLevel = (val) => {
  let item = levelOption.value.find((item) => item.value == val)
  return item?.name || ''
}
const disableEdit = computed(() => Object.keys(props.chatMap).length == 0)

watchEffect(() => {
  if (Object.keys(props.chatMap).length) {
    const newObj = JSON.parse(JSON.stringify(props.chatMap))
    userFrom.value = newObj
  }
})
/**/
const updateFrom = async () => {
  const data = { ...userFrom.value, sessionId: props.chatMap.sessionId }
  const res = await updateCustomer(data)
  if (res) {
    ElMessage.success('更新成功!')
    emit('reshCustomers', data)
  } else {
    ElMessage.error('更新失败!')
  }
  editFrom.value = true
}
const cancal = () => {
  editFrom.value = true
}
defineExpose({ cancal })
</script>

<style lang="scss" scoped>
.item-input {
  width: calc(100% - 72px);
}
.chatRight {
  height: 100%;
  flex: 0.6;
  background-color: #fff;
  padding: 0 8px;
  .user {
    padding: 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ececec;
    .name {
      max-width: 150px;
      min-width: 150px;
      margin-left: 10px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .user-info {
    padding-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ececec;
    font-size: 13px;
    color: #666;
    .title {
      width: 72px;
    }
    .currently {
      width: calc(100% - 84px);
      text-align: left;
      height: 17px;
      cursor: pointer;
    }
    .tel {
      margin-bottom: 10px;
      display: flex;
      .el-input {
        height: 17px;
      }
    }
    .item {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .items {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .currently {
        height: auto !important;
      }
    }
  }
}
</style>
